import React, { RefObject, useRef } from 'react'
import { useHover } from 'usehooks-ts'

export function Hover () {

    const ref: RefObject<HTMLButtonElement> = useRef<HTMLButtonElement | null>(null) as RefObject<HTMLButtonElement>

    const isHover = useHover(ref)

    return (
        <div className={ 'p-20 bg-slate-300' }>
            <button className={ 'p-3 bg-slate-900 text-white cursor-pointer disabled:cursor-not-allowed' }
                    ref={ ref } disabled={ isHover }>
                button
            </button>
        </div>
    )
}
